<template>
    <div class="hot-resources mb-[80px]">
        <div class="hot-resounrces-left">
            <div>
                <p><img src="/public/icon/fire.png" alt="">热门帖子</p>
                <div>
                    <p>如何快速掌握编程技巧?</p>
                    <p>作者：张三 · 1000 浏览</p>
                </div>
                <div>
                    <p>最新技术趋势分析</p>
                    <p>作者：李四 · 800 浏览</p>
                </div>
            </div>
            <div>
                <p><img src="/public/icon/star.png" alt="">最新资源</p>
                <div>
                    <p>Python编程入门教程</p>
                    <p>上传者：张三 · 50 下载</p>
                </div>
                <div>
                    <p>UI设计规范指南</p>
                    <p>上传者：赵六· 30 下载</p>
                </div>
            </div>
        </div>
        <div class="hot-resounrces-right">
            <h2>加入我们，开启成长之旅</h2>
            <p>我们将为你提供:</p>
            <ul>
                <li>实时技术交流与问答</li>
                <li>丰富的学习资源与项目陪跑</li>
                <li>活跃的社区氛围与成长激励</li>
            </ul>
            <a class="join-us" href="#">
                立即加入社群
            </a>
        </div>
    </div>
</template>
<script setup lang="ts">

</script>
<style lang="scss" scoped>
.hot-resources {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4.5rem;

    .hot-resounrces-left {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;

        &>div {
            width: 17.5625rem;
            height: 11.625rem;
            border-radius: 1.2rem;
            border-width: 1px;
            padding: 1.5625rem;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(243, 244, 246, 1);
            box-shadow: 0px 0.125rem 0.5rem 0px rgba(15, 23, 42, 0.04);

            &>p {
                font-family: Inter;
                font-weight: 600;
                font-size: 1.125rem;
                line-height: 1.75rem;
                letter-spacing: 0%;
                vertical-align: middle;
                display: flex;
                align-items: center;
                text-indent: 0.5rem;
            }

            &>div {
                margin-bottom: 0.75rem;
                display: flex;
                flex-direction: column;
                gap: 0.25rem;

                p:nth-child(1) {
                    font-family: Inter;
                    font-weight: 500;
                    font-size: 1rem;
                    line-height: 1.5rem;
                    letter-spacing: 0%;
                    color: rgba(34, 34, 34, 1);
                }

                p:nth-child(2) {
                    font-family: Inter;
                    font-weight: 400;
                    font-size: 0.75rem;
                    line-height: 1rem;
                    letter-spacing: 0%;
                    color: rgba(34, 34, 34, 1);

                }

            }
        }
    }

    .hot-resounrces-right {
        width: 19.5rem;
        height: 19.3125rem;

        h2 {
            font-family: Inter;
            font-weight: 800;
            font-size: 2rem;
            line-height: 2.3rem;
            letter-spacing: 0%;
            color: #18181B;
            margin-bottom: 1rem;
        }

        p {
            font-family: Inter;
            font-weight: 400;
            font-size: 1.1rem;
            line-height: 1.65rem;
            letter-spacing: 0%;
            color: #6B7280;
            margin-bottom: 1.5rem;
        }

        ul {
            list-style: none;
            gap: 8px;
            display: flex;
            flex-direction: column;
            margin-bottom: 2rem;

            li {
                padding-left: 1rem;
                font-family: Inter;
                font-weight: 400;
                font-size: 1rem;
                line-height: 1.5rem;
                letter-spacing: 0%;
                color: #222222;
                position: relative;
            }

            li::before {
                font-size: 1.125rem;
                position: absolute;
                content: '•';
                color: #222222;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }

        a {
            width: 10.875rem;
            height: 3.125rem;
            padding-top: 0.75rem;
            padding-right: 2.2rem;
            padding-bottom: 0.75rem;
            padding-left: 2.2rem;
            border-radius: 999px;
            background: #18181B;
            color: #FFFFFF;

        }
    }
}
</style>
